<!-- components/navigation/ThemeToggle.vue -->
<template>
  <el-button 
    circle 
    class="theme-toggle-btn"
    @click="toggleTheme"
  >
    <el-icon>
      <Sunny v-if="currentTheme === 'light'" />
      <Moon v-else />
    </el-icon>
  </el-button>
</template>

<script setup lang="ts">
// @ts-nocheck
import { computed } from 'vue'
import { useAppStore } from '@/stores/appStore'
import { Sunny, Moon } from '@element-plus/icons-vue'

const appStore = useAppStore()

const currentTheme = computed(() => appStore.theme)

const toggleTheme = () => {
  appStore.toggleTheme()
}
</script>

<style scoped>
.theme-toggle-btn {
  transition: all 0.3s ease;
}

.theme-toggle-btn:hover {
  background: var(--menu-hover-bg, rgba(24, 144, 255, 0.1));
  transform: rotate(30deg);
}

.theme-toggle-btn:hover .el-icon {
  color: var(--primary-blue, #1890ff);
}
</style>